<script setup lang="ts">
import {ref} from 'vue'

let zoom = ref(100);
const controlZoom: (type:'decrement'|'increment')=>void = (type)=>{
  switch (type) {
    case 'decrement' :
      zoom.value -= 10
      break;
    case 'increment' :
      zoom.value  += 10
      break
    default :
      throw `Unexpected parameter '${type}', Need 'decrement' or' increment'`
  }
  document.body.style.zoom = zoom.value /100
}
</script>

<template>
  <button @click="()=>controlZoom('increment')">+</button>
  <input :value="zoom">
  <button @click="()=>controlZoom('decrement')">-</button>
</template>

<style scoped>

</style>